<template>
  <div>
    <div>
      <el-row>
        <el-col :span="3">标题：</el-col>
        <el-col :span="5"
          ><el-input v-model="title" placeholder="请输入内容"></el-input
        ></el-col>
        <el-col :span="3">申请日期：</el-col>
        <el-col :span="5"
          ><input type="date" v-model="qianding"></el-col>
        <el-col :span="3">审批状态：</el-col>
        <el-col :span="5"
          ><el-input v-model="state" placeholder="请输入内容"></el-input
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="3">审批人：</el-col>
        <el-col :span="5"
          ><el-input v-model="fuzeren" placeholder="请输入内容"></el-input
        ></el-col>
        <el-col :span="3">付款方式：</el-col>
        <el-col :span="5"> <el-input v-model="jingbanren" placeholder="请输入内容"></el-input
        > </el-col>
        <el-col :span="6" class="kk">
          <el-button type="primary" @click="show">查询</el-button>
          <el-button type="primary">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="Headline" label="标题">
            </el-table-column>
            <el-table-column prop="UserDescribe" label="用途描述">
            </el-table-column>
            <el-table-column prop="PaymentAmount" label="付款金额">
            </el-table-column>
            <el-table-column prop="ClearingForm" label="付款方式"> </el-table-column>
            <el-table-column prop="ObjectOfPayment" label="支付对象">
            </el-table-column>
            <el-table-column prop="OpeningBank" label="开户行">
            </el-table-column>
            <el-table-column prop="BankAccount" label="银行账号">
            </el-table-column>
             <el-table-column prop="Proposer" label="申请人">
            </el-table-column>
             <el-table-column prop="DateOfPayments" label="付款日期">
            </el-table-column>
             <el-table-column prop="Remarkm" label="备注">
            </el-table-column>
            <el-table-column prop="EstablishTimezs" label="创建时间">
            </el-table-column>
            <el-table-column prop="ProcedureState" label="状态">
              <template slot-scope="scope">
                {{
                  scope.row.ProcedureState == 0
                    ? "待审批"
                    : scope.row.ProcedureState == 1
                    ? "已通过"
                    : "已拒绝"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="CaoName" label="审批人"> </el-table-column>
            <el-table-column label="操作" width="280">
              <template slot-scope="scope">
                <el-button type="primary" @click="check(scope.row)"
                  >查看</el-button
                >
                <el-button
                  type="success"
                  @click="tong(scope.row.Id)"
                  :disabled="scope.row.ProcedureState != 0"
                  >通过</el-button
                >
                <el-button
                  type="danger"
                  @click="ju(scope.row.Id)"
                  :disabled="scope.row.ProcedureState != 0"
                  >拒绝</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待审批" name="second">
          <el-table
            ref="multipleTable"
            :data="daiData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="Headline" label="标题">
            </el-table-column>
            <el-table-column prop="UserDescribe" label="用途描述">
            </el-table-column>
            <el-table-column prop="PaymentAmount" label="付款金额">
            </el-table-column>
            <el-table-column prop="ClearingForm" label="付款方式"> </el-table-column>
            <el-table-column prop="ObjectOfPayment" label="支付对象">
            </el-table-column>
            <el-table-column prop="OpeningBank" label="开户行">
            </el-table-column>
            <el-table-column prop="BankAccount" label="银行账号">
            </el-table-column>
             <el-table-column prop="Proposer" label="申请人">
            </el-table-column>
             <el-table-column prop="DateOfPayments" label="付款日期">
            </el-table-column>
             <el-table-column prop="Remarkm" label="备注">
            </el-table-column>
            <el-table-column prop="EstablishTimezs" label="创建时间">
            </el-table-column>
            <el-table-column prop="ProcedureState" label="状态">
              <template slot-scope="scope">
                {{
                  scope.row.ProcedureState == 0
                    ? "待审批"
                    : scope.row.ProcedureState == 1
                    ? "已通过"
                    : "已拒绝"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="CaoName" label="审批人"> </el-table-column>
            <el-table-column label="操作" width="280">
              <template slot-scope="scope">
                <el-button type="primary" @click="check(scope.row)"
                  >查看</el-button
                >
                <el-button
                  type="success"
                  @click="tong(scope.row.Id)"
                  :disabled="scope.row.ProcedureState != 0"
                  >通过</el-button
                >
                <el-button
                  type="danger"
                  @click="ju(scope.row.Id)"
                  :disabled="scope.row.ProcedureState != 0"
                  >拒绝</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已审批" name="third">
          <el-table
            ref="multipleTable"
            :data="yiData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
           <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="Headline" label="标题">
            </el-table-column>
            <el-table-column prop="UserDescribe" label="用途描述">
            </el-table-column>
            <el-table-column prop="PaymentAmount" label="付款金额">
            </el-table-column>
            <el-table-column prop="ClearingForm" label="付款方式"> </el-table-column>
            <el-table-column prop="ObjectOfPayment" label="支付对象">
            </el-table-column>
            <el-table-column prop="OpeningBank" label="开户行">
            </el-table-column>
            <el-table-column prop="BankAccount" label="银行账号">
            </el-table-column>
             <el-table-column prop="Proposer" label="申请人">
            </el-table-column>
             <el-table-column prop="DateOfPayments" label="付款日期">
            </el-table-column>
             <el-table-column prop="Remarkm" label="备注">
            </el-table-column>
            <el-table-column prop="EstablishTimezs" label="创建时间">
            </el-table-column>
            <el-table-column prop="ProcedureState" label="状态">
              <template slot-scope="scope">
                {{
                  scope.row.ProcedureState == 0
                    ? "待审批"
                    : scope.row.ProcedureState == 1
                    ? "已通过"
                    : "已拒绝"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="CaoName" label="审批人"> </el-table-column>
            <el-table-column label="操作" width="280">
              <template slot-scope="scope">
                <el-button type="primary" @click="check(scope.row)"
                  >查看</el-button
                >
                <el-button
                  type="success"
                  @click="tong(scope.row.Id)"
                  :disabled="scope.row.ProcedureState != 0"
                  >通过</el-button
                >
                <el-button
                  type="danger"
                  @click="ju(scope.row.Id)"
                  :disabled="scope.row.ProcedureState != 0"
                  >拒绝</el-button
                >
              </template>
            </el-table-column>
          </el-table></el-tab-pane
        >
      </el-tabs>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageindex"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalcount"
      >
      </el-pagination>
    </div>
    <!-- 查看信息 -->
    <el-dialog
      title="查看信息"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <table>
        <tr>
          <td>标题：</td>
          <td>
            <el-input
              v-model="checkData.Headline"
              placeholder="请输入内容"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>付款金额：</td>
          <td>
            <el-input
              v-model="checkData.PaymentAmount"
              placeholder="请输入内容"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>结算方式：</td>
          <td>
            <el-input
              v-model="checkData.ClearingForm"
              placeholder="请输入内容"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>支付对象：</td>
          <td>
            <el-input
              v-model="checkData.ObjectOfPayment"
              placeholder="请输入内容"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>开户行：</td>
          <td>
            <el-input
              v-model="checkData.OpeningBank"
              placeholder="请输入内容"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>银行账号：</td>
          <td>
            <el-input
              v-model="checkData.BankAccount"
              placeholder="请输入内容"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>用途描述：</td>
          <td>
            <el-input
              v-model="checkData.UserDescribe"
              placeholder="请输入内容"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>付款日期：</td>
          <td>
            <el-input
              v-model="checkData.DateOfPayment"
              placeholder="请输入内容"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>备注：</td>
          <td>
            <el-input
              v-model="checkData.Remarkm"
              placeholder="请输入内容"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>审批人：</td>
          <td>
            <el-input
              v-model="checkData.CaoName"
              placeholder="请输入内容"
            ></el-input>
          </td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      state: '',
      fuzeren: "",
      jingbanren: "",
      qianding: "",
      tableData: [],
      pageindex: 1,
      pagesize: 3,
      totalcount: 0,
      ids: [],
      activeName: "first",
      daiData: [],
      yiData: [],
      checkData: {
        Id: "",
        ApplyNumber: "",
        Headline: "",
        PaymentAmount: "",
        ClearingForm: "",
        ObjectOfPayment: "",
        OpeningBank: "",
        BankAccount: "",
        DateOfPayment: "",
        UserDescribe: "",
        Remarkm: "",
        Accessory: "",
        Proposer: "",
        EstablishTimez: "",
        ApprovalStatusj: "",
        Approverg: "",
        IsDelete: "",
      },
      dialogVisible: false,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      this.show();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.show();
      console.log(`当前页: ${val}`);
    },
    handleClose(done) {
      this.$confirm("确认关闭？").then(() => {
        done();
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.ids = [];
      for (var i = 0; i < val.length; i++) {
        this.ids.push(val[i].Id);
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //全部显示
    show() {
      this.$axios
        .get("https://localhost:44399/api/app/payment-shen/show-payment", {
          title: this.title,
          state: this.state,
          fuzeren: this.fuzeren,
          jingbanren: this.jingbanren,
          qianding: this.qianding,
          pageindex: this.pageindex,
          pagesize: this.pagesize,
        })
        .then((res) => {
          this.tableData = res.data.PageData;
          this.totalcount = res.data.PageTotal;
        });
    },
    //待审批显示
    shows() {
      this.$axios
        .get("https://localhost:44399/api/app/payment-shen/dai-payment", {
          title: this.title,
          state: this.state,
          fuzeren: this.fuzeren,
          jingbanren: this.jingbanren,
          qianding: this.qianding,
          pageindex: this.pageindex,
          pagesize: this.pagesize,
        })
        .then((res) => {
          this.daiData = res.data.PageData;
          this.totalcount = res.data.PageTotal;
        });
    },
    //已审批显示
    showk() {
      this.$axios
        .get("https://localhost:44399/api/app/payment-shen/yi-payment", {
          title: this.title,
          state: this.state,
          fuzeren: this.fuzeren,
          jingbanren: this.jingbanren,
          qianding: this.qianding,
          pageindex: this.pageindex,
          pagesize: this.pagesize,
        })
        .then((res) => {
          this.yiData = res.data.PageData;
          this.totalcount = res.data.PageTotal;
        });
    },
    //查看
    check(row) {
      this.dialogVisible = true;
      this.checkData = null;
      this.checkData = row;
    },
    //审批通过
    tong(row) {
      this.$axios
        .put(
          "https://localhost:44399/api/app/payment-shen/" +
            row +
            "/tong-payment"
        )
        .then((res) => {
          if (res.data > 0) {
            this.$message.success("已通过");
            this.show();
            this.shows();
            this.showk();
          } else {
            this.$message.error("未通过");
          }
        });
    },
    //审批拒绝
    ju(row) {
      this.$axios
        .put(
          "https://localhost:44399/api/app/payment-shen/" + row + "/ju-payment"
        )
        .then((res) => {
          if (res.data > 0) {
            this.$message.success("已拒绝");
            this.show();
            this.shows();
            this.showk();
          } else {
            this.$message.error("未拒绝");
          }
        });
    },
  },
  created() {
    this.show();
    this.shows();
    this.showk();
  },
};
</script>

<style>
</style>